
<template>
    <el-dialog v-if="value" :visible.sync="value" :modal="false" :before-close="onNegativeClick" width="50%"
        custom-class="file-identifier-modal" :close-on-click-modal="false">
      <div slot="title">
        <cusTitle title="识别内容"/>
      </div>
        <cusImg @over="over" v-loading="loading" :extra="extra" v-if="value" :fileId="fileId"
            parentClassName="el-dialog__body" />
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onNegativeClick()">取 消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import cusTitle from "@/components/cus-title/index.vue";
import cusImg from "@/components/cus-img/index.vue"

export default {
    components: { cusTitle, cusImg },
    props: {
        value: {
            require: true,
            type: Boolean,
        },
        fileId: {
            type: String,
        },
        extra: {
            type: String,
        },
    },
    data() {
        return {
            loading: false,
        }
    },
    methods: {
        onNegativeClick() {
            this.$emit("input", false);
        },
        onPositiveClick() {
            this.onNegativeClick();
        },
        over() {
            this.loading = false;
        }
    },
    watch: {
        value: {
            handler(val) {
                if (val) {
                    this.loading = true;
                }
            }
        }
    }

};
</script>

<style lang='scss'>
.file-identifier-modal {
    text-align: center;

    .el-dialog__body {
        padding-top: 0;
    }
}
</style>
